<template>
    <div>
        <h1>用户登录</h1>
        <div>
            <div class="logo">
                <!-- <img src="https://img.kaikeba.com/logo-new.png" alt=""> -->
            </div>
            <!-- <cube-button>登录</cube-button> -->
            <cube-form :model="model" :schema="schema" @submit.prevent="handleLogin"
                @validate="haneldValidate"></cube-form>
        </div>
    </div>
</template>
<script>
export default {
    name: 'LoginView',
    data() {
        return {
            model: {
                username: '',
                password: ''
            },
            schema: {
                fields:[{
                    type: 'input',
                    modelKey: 'username',
                    label: '用户名',
                    props: {
                        placeholder: '请输入用户名'
                    },
                    rules: {
                        required: true
                    },
                    trigger: 'blur'
                },
                {
                    type: 'input',
                    modelKey: 'password',
                    label: '密码',
                    props: {
                        placeholder: '请输入密码',
                        type: 'password',
                        eye: true
                    },
                    rules: {
                        required: true
                    },
                    trigger: 'blur'
                },
                {
                    type: 'submit',
                    label: '登录'
                }]
            }
        }
    },
    methods: {
        handleLogin() {
            this.$store.dispatch('login', this.model).then(success => {  //触发登录Action，dispatch 方法调用名为 login 的 Action，并传入 model 数据
                if(success){
                    const path = this.$route.query.redirect || '/'     //获取登录成功后要跳转的路径 获取重定向路径，如果没有重定向路径，则跳转到首页
                    this.$router.push(path)    //执行路由跳转
                }
            }
            ).catch(error => {
                const toast = this.$createToast({
                    type: 'error',
                    time: 2000,
                    txt: '登录失败' + error.message
                })
                toast.show()
            })
        },
        haneldValidate(result) {
            console.log(result)
        }
    }
}
</script>
<style scoped>
h1 {
    color: red;
}
</style>